<!--饼状图-->
<template>
  <div :id="tag" :key="tag" class="_ehl_pie"></div>
</template>
<script>
  export default {
    name: 'ehlPie',
    props: {
      options: { type: Object, required: true, default: () => {} },
    },
    data() {
      return {
        echart: null,
        local: null,
        tag: Math.ceil(Math.random() * 10000),
        deep: {
          color: [
            '#007AFF',
            '#45C9D0',
            '#5C89FF',
            '#715CFF',
            '#63C5FF',
            '#A363FE',
            '#FF9F40',
            '#FFCB48',
            '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 16,
            },
            formatter: '{b}<br/> 数量：{c}　占比 : {d}%',
          },
          title: {
            text: this.options.title,
            left: 'center',
            textStyle: { color: '#B4F5FF' },
          },
          legend: {
            textStyle: { color: '#B4F5FF' },
            orient: 'vertical',
            left: 'left',
            type: 'scroll',
            pageIconColor: '#B4F5FF',
            pageTextStyle: { color: '#B4F5FF' },
          },
          series: {
            radius: !this.options.radius ? '50%' : this.options.radius,
            itemStyle: {
              borderRadius: 4,
            },
          },
        },
        light: {
          color: ['#7C2DFE', '#2DA1FF', '#E96C0E', '#FEBE12', '#FBD85E', '#55ACEE'],
          tooltip: {
            textStyle: {
              fontSize: 16,
            },
          },
          title: {
            text: this.options.title,
            left: 'center',
          },
          legend: { orient: 'vertical', left: 'left', type: 'scroll' },
          series: {
            radius: !this.options.radius ? '50%' : this.options.radius,
            itemStyle: {
              borderRadius: 4,
            },
            formatter: '{b}<br/> 数量：{c}　占比 : {d}%',
          },
        },
        deepBeauty: {
          color: [
            '#7c2dfe',
            '#66e4dd',
            '#2da1ff',
            '#fa730c',
            '#febe12',
            '#A363FE',
            '#FF9F40',
            // '#FFCB48',
            // '#01D7E9',
          ],
          tooltip: {
            textStyle: {
              fontSize: 14,
            },
            formatter: '{b}<br/>数量：{c} <br/>占比：{d}%',
          },
          title: {
            text: this.options.title,
            left: 'left',
            textStyle: { fontSize: 14, color: '#B4F5FF' },
          },
          legend: {
            textStyle: { color: '#B4F5FF', fontSize: 14 },
            orient: 'vertical',
            left: 'left',
            top: 'middle',
            type: 'scroll',
            pageIconColor: '#B4F5FF',
            pageTextStyle: { color: '#B4F5FF' },
          },
          series: {
            radius: !this.options.radius ? '50%' : this.options.radius,
            center: !this.options.center ? '50%' : this.options.center,
            itemStyle: {
              borderRadius: 4,
            },
            label: !this.options.label
              ? { fontSize: 14, color: '#AFC1D5', formatter: '{b}  {c}' }
              : this.options.label,
          },
        },
      }
    },
    watch: {
      options: {
        handler() {
          setTimeout(() => {
            this.update()
          }, 500)
        },
        deep: true,
      },
    },
    mounted() {
      this.init()
    },
    destroyed() {
      this.echart = null
      window.onresize = null
    },
    methods: {
      init() {
        this.echart = this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), { lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
            setTimeout(() => {
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
      update() {
        this.echart.setOption(this.change(), { lazyMode: true })
      },
      change() {
        //变量定义
        let theme =
            this.options.theme === 'deep'
              ? this.deep
              : this.options.theme === 'light'
              ? this.light
              : this.deepBeauty,
          rows = this.options.rows,
          type = this.options.type,
          cprops = this.options.props,
          title = this.options.title
            ? { text: this.options.title, ...theme.title }
            : null,
          series = [],
          tooltip = this.options.tooltip ? this.options.tooltip : theme.tooltip,
          color = this.options.color ? this.options.color : theme.color,
          legend = this.options.legend ? this.options.legend : theme.legend
        //循环赋值
        let parm = {
          name: this.options.title,
          type: 'pie',
        }
        parm.data =
          rows &&
          rows.map(i => {
            return {
              value: i[cprops.value],
              name: i[cprops.label],
              //   itemStyle: {
              //     normal: {
              //       borderWidth: 8,
              //       shadowBlur: 20,
              //       borderColor: color[i],
              //       shadowColor: color[i],
              //     }, //为每一个颜色块设置样式，注：数据条数与颜色条数一致
              //   },
            }
          })
        if (type === 'rose') {
          parm.roseType = 'area'
        }
        series.push({ ...parm, ...theme.series })
        let tmp = { color, title, tooltip, legend, series }
        // console.log(tmp)
        return tmp
      },
    },
  }
</script>
<style lang="less" scoped>
  ._ehl_pie {
    width: 100%;
    height: 100%;
  }
</style>
